﻿<%@ MasterType VirtualPath="~/Main.master" %>
<%@ Import Namespace="Touch2Like.SharedLibrary" %>

<%@ Page Title="" Language="C#" MasterPageFile="~/Main.Master" AutoEventWireup="true"
    CodeBehind="Detail.aspx.cs" Inherits="Touch2Like.Web.Product.Detail" %>

<asp:Content ID="Content1" ContentPlaceHolderID="headcontent" runat="server">
    <style type="text/css">
        .proCon_pics
        {
            float: left;
            padding-top: 20px;
            width: 480px;
        }
        .proCon_form
        {
            float: right;
            width: 480px;
        }
        .proCon_pics_midBox
        {
            width: 350px;
            height: 350px;
            margin: 0 0 0 60px;
        }
        .proCon_form h2
        {
            font-size: 18px;
            padding: 20px 0 5px;
        }
        .proCon_form h2 em
        {
            color: #5E5E5E;
        }
        .proCon_form h2 span
        {
            float: right;
            font-size: 12px;
            color: #B8B8BA;
            font-weight: normal;
        }
        .proCon_form_intro
        {
            color: #B8B8BA;
            font-size: 12px;
            line-height: 20px;
        }
        .proCon_form_cfl
        {
            border-bottom: 1px dotted #DFDFDF;
            padding: 15px 0;
        }
        .proCon_form_price
        {
            float: left;
            font-size: 14px;
            color: #333;
        }
        .proCon_form_price strong
        {
            font-size: 24px;
            color: #ED5F11;
        }
        .proCon_form_price strong span
        {
            font-size: 22px;
        }
        .proCon_form_box
        {
            padding: 30px 0 0;
        }
        .proCon_form_box_upCon
        {
            /*min-height: 191px;
            _height: 191px;*/
            min-height: 121px;
            _height: 121px;
        }
        .proCon_form_box_form
        {
            padding: 20px;
            border-width: 1px;
            border-style: solid;
            border-color: #E5E5E5;
            background-color: #FAFAFA;
        }
        .proCon_form_box_form dl dt
        {
            color: #979693;
            padding: 0 0 20px;
        }
        .proCon_form_box_btn
        {
            color: #959595;
            font-size: 14px;
            width: 156px;
        }
        .shopBtn
        {
            display: block;
            height: 36px;
            font-size: 14px;
            text-align: center;
            line-height: 36px;
            color: #fff;
            background: #ec4f22;
            font-weight: bold;
            background: -webkit-gradient(linear,left top,left bottom,color-stop(#ff6e42,0),color-stop(#ec4f22,1));
            background: -webkit-linear-gradient(top,#ff6e42 0,#ec4f22 100%);
            background: -moz-linear-gradient(top,#ff6e42 0,#ec4f22 100%);
            background: -o-linear-gradient(top,#ff6e42 0,#ec4f22 100%);
            background: linear-gradient(top,#ff6e42 0,#ec4f22 100%);
            filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff6e42',endColorstr='#ec4f22',GradientType=0);
            -webkit-border-radius: 3px;
            -moz-border-radius: 3px;
            border-radius: 3px;
            border: 1px solid #fc6236;
        }
        .shopBtn:hover
        {
            -webkit-box-shadow: 0 1px 1px #fb7a54 inset,1px 1px 2px rgba(0,0,0,0.4);
            -moz-box-shadow: 0 1px 1px #fb7a54 inset,1px 1px 2px rgba(0,0,0,0.4);
            box-shadow: 0 1px 1px #fb7a54 inset,1px 1px 2px rgba(0,0,0,0.4);
        }
        .shopBtn:active
        {
            background: #ec4f22;
            -webkit-box-shadow: 1px 1px 2px #ec4a1c inset;
            -moz-box-shadow: 1px 1px 2px #ec4a1c inset;
            box-shadow: 1px 1px 2px #ec4a1c inset;
        }
        a.shopBtn:hover
        {
            text-decoration: none;
        }
        form select
        {
            height: auto;
        }
        .proDescrip_con_tit
        {
            margin-bottom: 10px;
            height: 40px;
            border-bottom: 1px solid #E1E1E1;
        }
        .proDescrip_con_tit li
        {
            float: left;
            padding: 10px 0 0;
        }
        .proDescrip_con_tit li a
        {
            display: line-block;
            padding: 0 15px;
            color: #979693;
            font-size: 16px;
            border-right: 1px solid #e6e4e3;
        }
        .proDescrip_con_tit li a:hover
        {
            text-decoration: none;
        }
        .proDescrip_con_tit li.selected a
        {
            color: #f87a30;
            cursor: default;
        }
        .proDescrip_con_tit ul
        {
            float: left;
        }
        .proDescrip_con_tit_links
        {
            float: right;
            padding-right: 20px;
        }
        .proDescrip_con_tit_links a
        {
            color: #999;
            line-height: 40px;
            font-size: 13px;
        }
        .proDescrip_con_tit_links a span
        {
            display: block;
            float: left;
        }
        .proDescrip_con_tit_links a span.item1
        {
            width: 33px;
            height: 25px;
            margin: 8px 5px 0 0;
            background-position: 0 0;
        }
        .proDescrip_con_tit_links a:hover
        {
            color: #f60;
        }
        .proDescrip_vedio_tit
        {
            border: 1px solid #e1e1e1;
            padding: 10px 20px 5px;
        }
        .proDescrip_vedio_tit span
        {
            display: block;
            float: left;
            font-size: 14px;
            color: #959595;
        }
    </style>
    <script type="text/javascript">
        var maxCount = 0;
        function showgoodsDesOrPara(sname, hname) {
            jQuery("#" + sname).css("display", "block");
            jQuery("#" + hname).css("display", "none");
            jQuery("#" + sname + "Tab").addClass("selected");
            jQuery("#" + hname + "Tab").removeClass("selected");
        }
        jQuery(document).ready(function () {
            goodsprice = parseFloat($("#goodsprice").text());
            goodscount = parseInt($(".goodscount").val());
            if (isNaN(goodscount)) goodscount = 0;
            $("#iniSelectedNum").text(goodscount);
            $("#totalprice").text(getpricestring(goodscount * goodsprice));
            $("#proCon_form_box_btnGonext").attr("href", '/product/Cart.aspx?act=Add&c=' + goodscount + '&g=<%=Request["ID"] %>');
            $(".goodscount").keyup(function () {
                goodsprice = parseFloat($("#goodsprice").text());
                goodscount = parseInt($(".goodscount").val());

                if (goodscount > maxCount) {
                    alert("invalid count");

                    goodscount = maxCount;
                    $(".goodscount").val(goodscount);
                }
                if (isNaN(goodscount)) goodscount = 0;
                $("#iniSelectedNum").text(goodscount);
                $("#totalprice").text(getpricestring(goodscount * goodsprice));
                $("#proCon_form_box_btnGonext").attr("href", '/product/Cart.aspx?act=Add&c=' + goodscount + '&g=<%=Request["ID"] %>');
            });
        });
    </script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="maincontent" runat="server">
    <div id="header_bottom">
        <div class="container clearfix">
            <div class="proCon cfl">
                <div class="proCon_pics">
                    <div class="proCon_pics_midBox">
                        <img id="proCon_pics_midSize" width="350" height="350" style="display: block;" runat="server">
                    </div>
                </div>
                <div class="proCon_form">
                    <h2>
                        <em>
                            <asp:Literal ID="lb_GoodsName" runat="server"></asp:Literal></em><span>SKU. <strong>
                                <asp:Literal ID="lb_GoodsNo" runat="server"></asp:Literal></strong></span></h2>
                    <ul class="proCon_form_intro">
                        <li>
                            <asp:Literal ID="lb_GoodsDes" runat="server"></asp:Literal></li>
                    </ul>
                    <div class="proCon_form_cfl cfl">
                        <p class="proCon_form_price">
                            <strong><span>$ </span><em id="goodsprice">
                                <asp:Literal ID="lb_GoodsPrice" runat="server"></asp:Literal></em></strong></p>
                        <div class="clear">
                        </div>
                    </div>
                    <div class="proCon_form_box">
                        <ul class="proCon_form_box_upCon">
                            <li class="cfl">
                                <h3>
                                    Quantity:</h3>
                                <p>
                                    <asp:TextBox ID="tb_GoodsCount" runat="server" Width="50px" Text="1" CssClass="goodscount"></asp:TextBox>
                                </p>
                            </li>
                        </ul>
                        <div class="proCon_form_box_form cfl ">
                            <dl>
                                <dt class="proCon_form_box_hasSelected">
                                    <asp:Literal ID="lb_GoodsName1" runat="server"></asp:Literal>
                                    Quantity:<span id="iniSelectedNum"> 1</span> Total：<strong id="iniSelectPrice"><span>$</span><em
                                        id="totalprice">89.00</em></strong></dt>
                            </dl>
                            <p class="proCon_form_box_btn cfl">
                                <a href="/product/Cart.aspx?act=Add&c=1&g=<%=Server.UrlEncode(Utility.Encryption.Encrypt(Request["ID"])) %>"
                                    id="proCon_form_box_btnGonext" class="shopBtn">Add to Cart</a>
                            </p>
                        </div>
                    </div>
                </div>
                <div class="clear">
                </div>
            </div>
            <div class="proDescrip_con">
                <div class="proDescrip_con_tit cfl">
                    <ul id="proNotice_1">
                        <li class="selected" id="goodsDesTab"><a href="###" style="padding-left: 0;" onclick="showgoodsDesOrPara('goodsDes','goodsPara')">
                            Description</a></li>
                        <li id="goodsParaTab"><a href="###" style="border: 0;" onclick="showgoodsDesOrPara('goodsPara','goodsDes')">
                            Technical Details</a></li>
                    </ul>
                    <div class="clear">
                    </div>
                </div>
                <div id="goodsDes" class="proDetails_tips">
                    <asp:Literal ID="lb_Description" runat="server"></asp:Literal>
                </div>
                <div id="goodsPara" class="proDetails_tips" style="display: none;">
                    <asp:Literal ID="lb_Parameter" runat="server"></asp:Literal>
                </div>
            </div>
        </div>
    </div>
</asp:Content>
